<template>
  <div id="main">
    <!-- 顶部导航栏 -->
    <van-sticky>
      <van-nav-bar
        title="账号管理"
        left-text="返回"
        right-text="其它"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </van-sticky>
    <div class="container">
      <div class="logo">
        <img src="../../../assets/image/logo.png" alt="" />
      </div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="请输入用户名"
          :rules="[{ required: true, message: '用户名不能为空' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '密码不能为空' }]"
        />
        <!-- 登录 -->
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit">登录</van-button>
        </div>
        <!-- 注册 -->
        <div style="margin: 16px">
          <van-button
            class="loginBtn"
            round
            block
            color="#fbce33"
            type="info"
            native-type="submit"
            to="/register"
          >
            注册
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { requestlogin } from "@/api/user.js";
import { Toast } from "vant";
Vue.use(Toast);
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    async onSubmit() {
      let res = await requestlogin(this.username, this.password);
      let { resultCode, resultInfo } = res.data;
      if (resultCode == 1) {
        let user = {
          username: resultInfo.username,
          headerimg: `http://10.7.173.54:8089${resultInfo.headerimg}`,
          nick: resultInfo.nick,
          id: resultInfo.uid,
          visittime: resultInfo.visittime,
        };
        this.$store.dispatch("saveUser", user);
        let token = res.data.token;
        this.$store.dispatch("saveToken", token);
        if ((token = this.$store.getters.getToken)) {
          Toast.success("登录成功！");
          if (this.$router.push({ path: "/register" })) {
            this.$router.push({ path: "/my" });
          } else {
            setTimeout(() => {
              this.$router.go(-1);
            }, 3000);
          }
        }
      } else {
        Toast.fail("验证失败，请确定已注册");
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$toast("待开发");
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

#main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .container {
    flex-grow: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .van-form {
      .van-field {
        height: 50px;
        line-height: 50px;
        margin-bottom: 10px;
      }
    }

    .logo {
      width: 160px;
      height: 160px;
      text-align: center;
      margin-top: 40px;
      color: white;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .loginBtn {
    margin-left: 50%;
    transform: translate(-50%, 0);
  }
}
</style>
